import { Options, Vue } from 'vue-class-component';
import { Form } from '@/widghts/data-source/form/form';
import { ToolBar } from '@/widghts/data-source/toolbar/toolbar';
import './data-source-edit-view.less';
import axios from 'axios';
import { Subject } from 'rxjs';
import { notification } from 'ant-design-vue';
import { Prop } from 'vue-property-decorator';

@Options({
    components: {
        'app-form': Form,
        'app-toolbar': ToolBar,
    },
})
export default class DataSourceEditView extends Vue {
    /**
     * 视图参数
     *
     * @type {*}
     * @memberof DataSourceEditView
     */
    @Prop()
    viewparams: any = {};

    /**
     * 上下文
     *
     * @type {*}
     * @memberof DataSourceEditView
     */
    @Prop()
    context: any = {};

    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof DataSourceEditView
     */
    public viewState: Subject<ViewState> = new Subject();

    /**
     * 工具栏模型对象
     *
     * @type {any[]}
     * @memberof DataSourceEditView
     */
    toolbarModel: any[] = [
        {
            action: 'save',
            text: '保存',
            type: 'primary',
        },
    ];

    /**
     * 工具栏项单机触发
     *
     * @param {*} item
     * @memberof DataSource
     */
    toolbarItemClick(item: any) {
        if (item.action === 'save') {
            const form: any = this.$refs.form;
            form.$refs.form.validate((valid: any) => {
                if (valid) {
                    this.formSave();
                } else {
                    return false;
                }
            });
        }
    }

    /**
     * 表单保存
     *
     * @memberof DataSourceEditView
     */
    formSave() {
        const form: any = this.$refs.form;
        const data = form?.formData;
        if (data) {
            if (data.id) {
                this.updateData(data);
            } else {
                this.createData(data);
            }
        }
    }

    /**
     * 新建数据
     *
     * @memberof DataSourceEditView
     */
    createData(data: any) {
        this.$http.post('/api/1/database/config/1/add', data).then((res: any) => {
            if (res && res.status === 200) {
                const data = res.data;
                if (data.code === 1) {
                    notification.success({
                        message: '新建成功!',
                    });
                    this.$emit('data-change');
                } else {
                    const data = res.data;
                    notification.error({
                        message: data.message,
                    });
                }
            } else {
                const data = res.data;
                notification.error({
                    message: data.message,
                });
            }
        });
    }

    /**
     * 修改数据
     *
     * @memberof DataSourceEditView
     */
    updateData(data: any) {
        this.$http.post('/api/1/database/config/1/update', data).then((res: any) => {
            if (res && res.status === 200) {
                const data = res.data;
                if (data.code === 1) {
                    notification.success({
                        message: '修改成功!',
                    });
                    this.$emit('data-change');
                } else {
                    const data = res.data;
                    notification.error({
                        message: data.message,
                    });
                }
            } else {
                const data = res.data;
                notification.error({
                    message: data.message,
                });
            }
        });
    }

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof DataSourceEditView
     */
    render() {
        return (
            <div class='data-source-edit-view'>
                <app-toolbar toolbarModel={this.toolbarModel} onToolbarItemClick={this.toolbarItemClick}></app-toolbar>
                <app-form context={this.context} ref='form'></app-form>
            </div>
        );
    }
}
